<template>
  <div class="pdf-preview">
    <div v-if="props.showAll" class="pdf-wrap">
      <vue-pdf-embed
        :source="state.source"
        :style="state.scale"
        class="vue-pdf-embed"
        
      />
    </div>
    <div v-else class="pdf-wrap">
      <vue-pdf-embed
        :source="state.source"
        :style="state.scale"
        class="vue-pdf-embed"
        :page="1"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import VuePdfEmbed from 'vue-pdf-embed'

const props = defineProps({
  pdfUrl: {
    type: String
    // required: true
  },
  showAll: {
    type: Boolean
  }
})
const computedVa = computed(() => props.pdfUrl)
const state = reactive({
  source: computedVa, //预览pdf文件地址
  pageNum: 1, //当前页面
  scale: 1, // 缩放比例
  
})

</script>
<style lang="css" scoped>
.pdf-preview {
  position: relative;
  height: 65vh;
}
.vue-pdf-embed {
  text-align: center;
  width: 450px;
  height: 65vh;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}
.pdf-wrap {
  margin: 0 auto;
  overflow-y: auto;
}
</style>
